<template>
  <div class="shopcar-container">
    <van-nav-bar title="我的全部购物车(2)" />

    <div class="item">
      <div style="overflow: hidden">
        <h3>沃尔玛</h3>
      </div>

      <van-card
        title="商品标题"
        thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #price> ￥<span>33.6 x 3</span> </template>
        <template #num>￥<span>99.9</span></template>
      </van-card>
      <van-card
        title="商品标题"
        thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #price> ￥<span>33.6 x 3</span> </template>
        <template #num>￥<span>99.9</span></template>
      </van-card>
      <div style="overflow: hidden">
        <van-button
          type="primary"
          color="#F5F5F5"
          block
          icon-position="right"
          icon="arrow-down"
          >共计3件/1.4kg</van-button
        >
      </div>
    </div>
    <div class="item">
      <div style="overflow: hidden">
        <h3>京东7FRESH七鲜</h3>
      </div>

      <van-card
        title="商品标题"
        thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #price> ￥<span>33.6 x 3</span> </template>
        <template #num>￥<span>99.9</span></template>
      </van-card>
      <van-card
        title="商品标题"
        thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #price> ￥<span>33.6 x 3</span> </template>
        <template #num>￥<span>99.9</span></template>
      </van-card>
    </div>
    <div class="item">
      <div style="overflow: hidden">
        <h3>百果园</h3>
      </div>

      <van-card
        title="商品标题"
        thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #price> ￥<span>33.6 x 3</span> </template>
        <template #num>￥<span>99.9</span></template>
      </van-card>
      <van-card
        title="商品标题"
        thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #price> ￥<span>33.6 x 3</span> </template>
        <template #num>￥<span>99.9</span></template>
      </van-card>
    </div>
    <jd-footer></jd-footer>
  </div>
</template>

<script>
import JdFooter from "@/components/footer/Footer.vue";
export default {
  name: "shop_car",
  components: { JdFooter },
};
</script>

<style lang="less" scoped>
.item {
  width: 339px;
  height: 100%;
  margin: auto;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 4px;
  border-radius: 4px;
  h3 {
    margin-left: 25px;
    text-align: left;
  }
  .van-card {
    margin-top: 0;
    background: #ffffff;
  }
  /deep/ .van-card__thumb {
    width: 46px;
    height: 46px;
  }
  /deep/ .van-card__content {
    text-align: left;
    min-height: 46px;
  }
  .van-button--block {
    color: #999999 !important;
    margin: 10px auto;
    // margin-top: 10px;
    width: 307px;
    height: 28px;
  }
}
</style>